<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
      >
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="news">查看社区帖子</el-menu-item>
        <el-menu-item index="signIn">签到</el-menu-item>
        <el-menu-item index="login">登录</el-menu-item>
        <el-menu-item index="register">注册</el-menu-item>
        <el-menu-item index="profile">个人中心</el-menu-item>
        <el-menu-item index="userPosts" @click="router.push({ name: 'UserPosts' })">
          我的帖子
        </el-menu-item>
        <el-menu-item index="searchPost" @click="router.push({ name: 'SearchPost' })">
          搜索帖子
        </el-menu-item>
        <el-menu-item index="logout">退出</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 修改了这里 -->
    <el-main class="app-main">
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const activeIndex = ref(route.name?.toString() || 'home')
watch(route, (newRoute) => {
  activeIndex.value = newRoute.name?.toString() || 'home'
})

const handleSelect = (key: string) => {
  console.log(key)
  router.push({
    name: key.charAt(0).toUpperCase() + key.slice(1),
  })
}
</script>

<style scoped>
.app-main {
  background-color: transparent;
}
</style>